<template>
    <view class="pickUpGoods">
        <view  class="address_box" @tap="clickAddress()" v-if="address_info.id===undefined">
            <view class="address_tips">您还未添加地址喔！</view>
        </view>
        <view v-else class="address_box" @tap="clickAddress()">
            <view  class="address_1">{{address_info.province}}{{address_info.city}}{{address_info.district}}</view>
            <view  class="address_2">{{address_info.house_number}}</view>
            <view  class="address_3">{{address_info.realname}}&nbsp;&nbsp;{{address_info.mobile}}</view>
        </view>
<!--        <view>-->
<!--            <van-cell-group>-->
<!--                <van-field-->
<!--                        :value="remark"-->
<!--                        required-->
<!--                        clearable-->
<!--                        label="兑换备注"-->
<!--                        icon="warning-o"-->
<!--                        placeholder="请输入您的备注"-->
<!--                        @change="remarkTips"-->
<!--                />-->
<!--            </van-cell-group>-->
<!--        </view>-->
        <view class="beizhu_box">
            <view class="beizhu_text">备注：</view>
            <view class="beizhu_area">
                <textarea placeholder-style="" placeholder="如有需要，请输入相关商品备注"  @input="remarkTips($event)" auto-height />
            </view>

        </view>
        <view class="goods_box">
            <view class="goods_col_1">
                <view><image class="goods_img" :src="goods_data.goods_img"/><view class="point">{{goods_data.goods_point}}积分</view></view>
                <view class="stepper"><text>x{{goods_data.goods_num}}</text></view>
            </view>
        </view>
        <view class="check_box">
            <view>
                <van-checkbox class="s-all" :disabled="shopList.length===0" :value="checked" checked-color="#FF9502" @change="handleSelect">
                </van-checkbox>
            </view>
            <view class="tips_text">
                我已阅读并同意<text @tap="goWatchAgreeement()" class="agreement">《数字协议证书》</text>
            </view>
        </view>

        <view @tap="submit()" class="fixed_box"><text class="tips_title">需花费:&nbsp;{{goods_data.goods_point}}积分</text><button class="goods_button">确认兑换</button></view>
        <Mtips :toShow="show" :message="message" :url="url" :query="query" @sure="sure"></Mtips>
    </view>
</template>

<script>
    import Mtips from '@/components/m-tips.vue'
    export default {
        name:"sureChange",
        data() {
            return {
                checked:false,
                address_info:{},
                show:false,
                message:'兑换成功,请在兑换明细中查看',
                url:'/main/user',
                query:"user_id=33&user_name='何炀'",
                goods_data:{
                    id:'',
                    goods_img:'',
                    goods_num:'',
                    goods_point:'',
                    goods_name:'',
                    tips:'',
                },
                choose_address_id:'',
                remark:''
            }
        },
        components:{
            Mtips,
        },
        onLoad(query){
            this.goods_data.goods_name=query.goods_name
            this.goods_data.id=query.goods_id
            this.goods_data.goods_num=query.num
            this.goods_data.goods_img=query.image
            this.goods_data.goods_point=query.goods_point
        },
        onShow:function(){
            this.choose_address_id=this.$store.state.chooseAddressId
            this.getAddressInfo()
        },
        methods: {
            remarkTips(res){
                // console.log(res)
                this.remark=res.detail.value
            },
           async submit(){  // 确认兑换，先判断是否有地址，再判断是否实名，再判断是否同意协议
               // console.log(this.remark)
                let user_info =this.$store.state.user_info
                if(this.address_info.id===undefined){
                    uni.showToast({
                        title:"您还未选择地址哟",
                        icon:"none",
                    })
                    return
                }
                if(user_info.is_valid!==1){
                    uni.showToast({
                        title:"您还未实名认证哟！",
                        icon:"none",
                        duration: 1500,
                        success:function(){
                            uni.navigateTo({
                                url: "/pages/user/certification"
                            })
                        }
                    })
                    return
                }
                if(!this.checked){
                    uni.showToast({
                        title:"请先阅读并同意数字证书协议",
                        icon:"none",
                    })
                    return;
                }
                let res= await  this.$apis.exchangeProduct({
                    access_token:'',
                    number:this.goods_data.goods_num,
                    address_id:this.address_info.id,
                    integral_product_id:this.goods_data.id,
                    remark:this.remark
                    })
                if(res.code===0){
                    let user_data = await this.$apis.getUserInfo({access_token:''})
                    if(user_data.code===0){
                        this.$store.commit("SET_USERINFO",user_data.data)
                    }
                    this.show=true; //显示确定弹出框
                }

            },
            sure(res){ // 子组件传递过来的东西
                this.show=res;
                // uni.navigateBack({
                //     delta: 1
                // });
                uni.reLaunch({
                    url: "/pages/home/pointsMore"
                })
            },
            handleSelect(){ // 选择单选框
                this.checked=!this.checked
            },
            goWatchAgreeement(){ // 查看协议
                this.$router.push({
                    route:this.$routesConfig.watchAgreement,
                    query:{sign_url:"https://xhrdadmin.scxhrd.com"+this.$store.state.user_info.agreement_doc}
                })
                // uni.showToast({
                //     title:"暂无协议可查阅",
                //     icon:"none",
                //     duration:2000
                // })
            },
            async getAddressInfo(){ // 获取默认地址,如果没有默认地址则去取第一个地址
                if(this.choose_address_id!==''){
                    let resData = await this.$apis.getAddressInfo({id:this.choose_address_id})
                    this.address_info=resData.data.address
                }else{
                    let resData = await this.$apis.getDefaultAddress({access_token:''})
                    if(resData.data.address.id!==undefined){
                        this.address_info=resData.data.address
                    }else{
                        let otherAddress = await  this.$apis.getAddressList({access_token:''})
                        if(otherAddress.data.addressList.length>0){
                            this.address_info=otherAddress.data.addressList[0]
                        }
                    }
                }

            },
            clickAddress(){
                uni.navigateTo({
                    url: "/pages/user/addressList"
                })
            }

        }
    }
</script>

<style>
    page {
        background-color:#FAFAFA
    }
    .van-stepper__input{
        background-color: #ffffff !important;
    }
</style>
<style lang="less" scoped>
    .address_box{
        background-color: #ffffff;
        width: 710rpx;
        height: 170rpx;
        margin-left: 20rpx;
        margin-top: 20rpx;
        padding-bottom: 8rpx;
        padding-top: 8rpx;
        padding-left: 5rpx;
        padding-right: 5rpx;
    }
    .address_1{
        font-size: 28rpx;
        color: #333333;
        font-weight: lighter;
        margin-top: 10rpx;
        font-family: SourceHanSansCN-Light;
    }
    .address_2{
        font-size: 32rpx;
        color: #333333;
        font-weight: normal;
        margin-top: 10rpx;
        font-family: SourceHanSansCN-Regular;
    }
    .address_3{
        font-size: 30rpx;
        color: #333333;
        font-weight: normal;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
        font-family: SourceHanSansCN-Regular;
    }
    .goods_box{
        background-color: #ffffff;
        margin-left: 20rpx;
        margin-top: 40rpx;
        width: 710rpx;
        height: 160rpx;
        padding-top: 8rpx;
        padding-bottom: 20rpx;

    }
    .goods_button{
        text-align: center;
    }
    .goods_img{
        height: 140rpx;
        width: 130rpx;
    }
    .goods_col_1{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .stepper{
        transform: translate(0,25%);
        margin-right: 20rpx;
    }
    .goods_col_3{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 26rpx;
        color: #FF9502;
        margin-top: 10rpx;
    }
    .goods_col_4{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10rpx;
    }
    .tips{
        text-align: right;
        font-size: 25rpx;
    }
    .goods_button{
        background-color: #ffffff;
        color: #FF9502 !important;
        font-size: 28rpx;
        border: none !important;
        width: 180rpx;
        float: right;
        margin-top: 35rpx;
        margin-right: 20rpx;

    }
    .goods_col_2{
        color: #666666;
        font-size: 26rpx;
        margin-top: 10rpx;
    }
    .tips_{
        font-size: 26rpx;
        color: #666666;
    }
    input:-ms-input-placeholder {
        color: #CCCCCC;
    }/* Internet Explorer 10+ */

    input::-webkit-input-placeholder {
        color: #CCCCCC;
    }/* WebKit browsers */
    .input_box{
        width: 70%;
        margin-right: 20rpx;
    }
    .daofu{
        margin-right: 20rpx;
    }
    .point{
        position: relative;
        top: -48rpx;
        left: 135rpx;
        font-size: 26rpx;
        color: #FF9502;
    }
    .fixed_box{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 140rpx;
        background-color: #FF9502;
    }
    .check_box{
        margin-left: 118rpx;
        margin-top: 100rpx;
        display: flex;
        flex-direction: row;
        justify-content: left;
    }
    .agreement{
        color: #FF9502;
    }
    .tips_title{
        color: #ffffff;
        position: relative;
        top:46rpx;
        left: 36rpx;

    }
    .address_tips{
        margin-top: 60rpx;
        text-align: center;
    }
    .beizhu_box{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: #ffffff;
    }
    .beizhu_text{
        color:#666666;
        padding-bottom: 15rpx;
        padding-top: 12rpx;
    }
    .beizhu_area{
        font-size: 28rpx;
        /*padding-top: 5rpx;*/
        /*line-height: 1.8px;*/
        /*padding-top: 8rpx;*/
    }

</style>
